<template>
  <v-chart class="chart" :option="option" autoresize/>
</template>

<script lang="ts" setup>
import {use} from 'echarts/core';
import {CanvasRenderer} from 'echarts/renderers';
import {BarChart} from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  GridComponent
} from 'echarts/components';
import VChart from 'vue-echarts';
import {ref} from 'vue';
import axios from "axios";

interface DataItem {
  productName: string;
  stockCount: number;
}

const data = ref<DataItem[]>([]);

const getAll = () => {
  axios({
    url: "http://localhost:8080/product/all",
    method: "get",
    params: ""
  }).then((res) => {
    data.value = res.data;
    console.log(data);
    option.value.xAxis.data = data.value.map((item) => item.productName);
    console.log(option.value.xAxis.data);
    option.value.series[0].data = data.value.map((item) => item.stockCount);
  })
}

getAll();


use([
  CanvasRenderer,
  BarChart,
  TitleComponent,
  TooltipComponent,
  GridComponent
]);


const option = ref({
  // title: {
  //   text: '库存报表',
  //   left: 'center',
  // },
  xAxis: {
    type: 'category',
    data: ['Mon'],
    axisLabel: {
      interval: 0, // 设置标签的显示间隔
      // 其他axisLabel配置...
    }
  },
  yAxis: {
    type: 'value'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)',
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
});
</script>

<style scoped>
.chart {
  height: 300px;
  width: 600px;
}
</style>
